웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리
아래는 SCSS를 사용하여 스타일을 선언할 때 어떻게 변수를 선언하고 변수 선언과 관련된 다양한 방법들을 알아보려고 합니다.
# scss의 변수 선언하기
scss에서도 역시 변수를 선언하고 사용할 수 있습니다. 그렇다면 변수 선언을 왜 할까요?동일한 컴포넌트 UI에 동일한 스타일을 유지할 수 있다.
버튼이나 아이콘에 적용된 스타일을 모든 페이지에서 한 번에 바꾸기는 쉽지 않습니다. 이 경우 변수를 사용하여 지정해두면 간단하게 변수의 값만 변경해 모든 페이지의 스타일을 한 번에 변경해 적용할 수 있습니다. 그리고 모든 변수들을 variable.scss 등의 파일을 만들어 한 번에 모아서 관리하기도 합니다. 이런 이유로 유지보수, 고도화에 유리합니다.
! scss 변수 선언의 방법
변수 선언시 아래와 같이 $ 키워드를 사용합니다.$변수명: 변수의 값;
선언된 변수를 사용하는 방법은 매우 간단합니다. 아래에서 몇 가지 예제를 만들어 보겠습니다.
아래는 가장 간단한 예제입니다. 빨간색 텍스트색을 주기 위해 $red라는 변수를 만들었습니다.
$red: #f00;
.red {
color: $red;
}
.red {
color: $red;
}
이제 red 클래스명을 가진 아래의 태그에서 스타일이 적용되게 됩니다.
<span class="red">RED TEXT</span>
매우 간단하죠. 추가로 interpolation(보간법), 정의된 스타일에 추가해서 적용하는 방법을 알아봅니다.
! scss 변수 interpolation(보간법) 알아보기
아래 방법은 변수를 보간법으로 추가해 사용하는 방법입니다. 먼저 아래와 같은 width 값을 변수에 선언한 후 보간법을 사용해 적용해보겠습니다.$widthLeft : 20px;
.column {
width: calc(100% - $widthLeft);
// (X) 에러가 발생함
width: calc(100% - #{$widthLeft});
// (O) 정상 동작함
}
.column {
width: calc(100% - $widthLeft);
// (X) 에러가 발생함
width: calc(100% - #{$widthLeft});
// (O) 정상 동작함
}
위와 같이 에러가 발생하는 이유는 scss를 컴파일할 때 적용된 변수가 잘못 파싱되었기 때문입니다. 이런 이유로 아래처럼 #{$변수} 문법을 적용해야만 정상 동작하게 됩니다.
추가로 @mixin을 사용해 파일명을 변수로 받는 경우에도 역시 보간법이 사용되어야 합니다. 아래에서는 생성될 스타일의 파일명에 보간법을 사용하였습니다. 아래의 @mixin @include가 어떻게 사용되었는지 확인해보세요.
@mixin custom-icon($name) {
.icon-#{$name} {
background-image: url('/icons/#{$name}.svg');
}
}
@include custom-icon('arrow-lt');
.icon-#{$name} {
background-image: url('/icons/#{$name}.svg');
}
}
@include custom-icon('arrow-lt');
이처럼 보간법을 사용하면 생성될 스타일의 이름에도 변수명을 사용할 수 있게됩니다. 참고로 아래 링크는 @mixin, @include 정보입니다.
링크 바로가기 >
https://webisfree.com/2019-10-08/[scss]-mixin-include-사용방법-및-예제보기
! scss 변수에 전역 범위 사용하기, !global
이번에 알아볼 방법은 변수 선언시 전역으로 설정하는 방법을 알아봅니다. 예를들어 아래처럼 $blue 변수가 미리 선언된 후 하위 요소의 scope 내부에서 또 다시 $blue가 선언된 경우를 생각해봅니다.
$red: #f00;
$blue: #f00;
.red {
color: $red;
$blue: #09f;
}
.blue {
color: $blue;
}
$blue: #f00;
.red {
color: $red;
$blue: #09f;
}
.blue {
color: $blue;
}
여기서 $blue 이름의 변수는 두 번 선언되었습니다. 그런데 두 번째 선언된 $blue는 .red 클래스의 하위 scope 내부에 선언되어 당연이 내부 scope 영역에서만 스타일을 가지게 됩니다.
어떻게 하면 전역 범위로 선언해서 값을 변경할 수 있을까요? 이때 바로 !global을 사용할 수 있습니다. 방법은 선언된 변수뒤에 !global이름의 키워드만 추가하면 됩니다. 즉 위 6번 라인은 아래와 같이 바뀌어 사용해야겠죠.
$blue: #09f !global;
이제 실제 웹에서는 아래와 같이 css로 변경되어 출격되어 나타납니다.
.red {
color: #f00;
}
.blue {
color: #09f;
}
color: #f00;
}
.blue {
color: #09f;
}
이처럼 전역 스코프가 아니더라도 전역 범위로 변수를 선언, 변경하기 위해서 !global을 사용하면 간단하게 선언하는 것이 가능합니다.
! scss 변수 기본값을 적용하기, !default
이번 예제는 scss의 변수 선언시 기본값을 사용하는 방법입니다. 엄밀히 말하면 기본값이 있다면 적용하지 않도록 하는 방법이라고 얘기할 수 있습니다. 먼저 아래 코드를 봐주세요.
$red: red;
$red: blue;
$red: blue;
$red 변수가 중복되어 선언되었습니다. 이때 적용되는 값은 마지막에 선언된 blue색이 나타나게 됩니다... 하지만 만약 미리 선언된 변수가 있는 경우 이를 기본값을 가졌다고 보고 선언되지 않도록 할 수 있을까요? 이때 !default를 사용합니다.
$변수명: 변수값 !global;
방법은 !default 키워드를 추가하면 됩니다. 이제 아래에 추가 후 어떻게 나타나는지 알아보겠습니다.
$red: red;
$red: blue !default;
$red: blue !default;
이번에는 아까와 달리 blue 색이 아닌 red값이 적용되어 나타나게 됩니다. 미리 선언된 값이 있기 때문이죠.
언제 !default를 사용할까요?
scss에서 변수를 선언할 때는 하나의 파일 variable.scss을 만들어 파일 단위의 모듈 형태로 만드는 경우가 많습니다. 이런 경우 다수의 모듈이 만들어 지고 각각의 모듈에서 동일한 이름의 변수가 만들어질 수 있습니다. 이때 의도하지 않은 스타일이 적용될 수도 있죠. 이때 !default를 사용하여 예방하는 것이 가능합니다.
! 기타 팁 및 정보
아래는 그 외 간단한 팁 및 정보입니다.변수의 값을 연산자를 사용해 추가할 수 있음
만약 두 개의 변수의 값을 더한 값이 필요한 경우 스타일 내부에서 바로 적용할 수 있습니다.
$widthA: 100px;
$widthB: 200px;
$widthC: $widthA + $widthB;
$widthB: 200px;
$widthC: $widthA + $widthB;
여기서 $widthC는 위 두 값을 더한 값이 되겠죠.
참고로, 이처럼 scss에서도 연산자에 대한 컴파일이 일어나므로 css와의 충돌(?), 에러 등을 피하기 위해서 보간법이 필요한 이유입니다.
아래의 글도 찾고 계시지 않나요?
